<template>
    <div class="footer">
        <div class="content">
            <div class="left-box">
                <div class="logo icon" style="--icon: url(/Logo-Web-1300-300.png)"></div>
                <div class="text">Your trusted platform for American stock trading and investment. Trade smarter with real-time data and advanced tools.</div>
            </div>
            <div class="right-box">
                <div class="link-group" v-for="group_item in link_group" :key="group_item.id">
                    <div class="link-group-title">{{ group_item.title }}</div>
                    <div class="link-list">
                        <Link1 v-for="item in group_item.link_list" :key="item.id" :text="item.text" :show_icon="false" padding="0" @click="item.click"></Link1>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">© 2025 StockHub. All rights reserved.</div>
    </div>
</template>

<script setup>
import Link1 from '@/components/common/link/Link1.vue';

const link_group = [
    {
        id: 1,
        title: 'Platform',
        link_list: [
            {
                id: 1,
                text: 'Market Hours',
                click: () => {}
            },
            {
                id: 2,
                text: 'Mobile App',
                click: () => {}
            },
        ],
    },
    {
        id: 2,
        title: 'Resources',
        link_list: [
            {
                id: 1,
                text: 'Market News',
                click: () => {}
            }
        ]
    },
    {
        id: 3,
        title: 'Company',
        link_list: [
            {
                id: 1,
                text: 'About Us',
                click: () => {}
            },
            {
                id: 2,
                text: 'Contact',
                click: () => {}
            },
            {
                id: 3,
                text: 'Terms of Service',
                click: () => {}
            },
            {
                id: 4,
                text: 'Privacy Policy',
                click: () => {}
            },
        ]
    },
];
</script>

<style scoped lang="less">
.footer {
    box-sizing: border-box;
    width: 100%;
    height: var(--footer-height);
    background-color: #fff;
    padding: 1.5vw 11vw;
    border-top: 0.1vw solid rgb(229, 231, 235);
    display: flex;
    flex-direction: column;

    .content {
        flex: 1;
        display: flex;
        gap: 2vw;

        .left-box {
            flex: 3;
            display: flex;
            flex-direction: column;
            gap: 0.8vw;

            .logo {
                --w: 7vw;
                --h: 2vw;
            }

            .text {
                font-size: 0.7vw;
                color: #777;
            }
        }

        .right-box {
            flex: 7;
            display: flex;
            gap: 1vw;

            .link-group {
                flex: 1;
                
                .link-group-title {
                    font-size: 0.85vw;
                    font-weight: 500;
                    color: #000;
                    margin-bottom: 1vw;
                }

                .link-list {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5vw;
                }
            }
        }
    }

    .copyright {
        font-size: 0.7vw;
        color: #888;
        padding-top: 1vw;
        border-top: 0.1vw solid rgb(229, 231, 235);
    }
}

@media (max-aspect-ratio: 16/9) {
    .footer {
        padding: 3vw 5vw;

        .content {
            gap: 5vw;

            .left-box {
                gap: 1vw;

                .logo {
                    --w: 10vw;
                    --h: 3vw;
                }

                .text {
                    font-size: 1vw;
                }
            }

            .right-box {
                gap: 2vw;

                .link-group {
                    .link-group-title {
                        font-size: 1.2vw;
                        margin-bottom: 1.5vw;
                    }

                    .link-list {
                        gap: 1vw;
                    }
                }
            }
        }

        .copyright {
            font-size: 1vw;
            margin-top: 1.5vw;
        }
    }
}

@media (max-aspect-ratio: 4/3) {
    .footer {
        padding: 4vw 3vw;

        .content {
            gap: 9vw;

            .left-box {
                gap: 2vw;

                .logo {
                    --w: 13vw;
                    --h: 4vw;
                }

                .text {
                    font-size: 1.5vw;
                }
            }

            .right-box {
                gap: 4vw;

                .link-group {
                    .link-group-title {
                        font-size: 1.5vw;
                        margin-bottom: 3vw;
                    }

                    .link-list {
                        gap: 1.5vw;
                    }
                }
            }
        }

        .copyright {
            font-size: 1.5vw;
            margin-top: 2vw;
        }
    }
}

@media (max-aspect-ratio: 1/1) {
    .footer {
        .content {
            gap: 11vw;

            .left-box {
                gap: 3vw;

                .logo {
                    --w: 15vw;
                    --h: 5vw;
                }

                .text {
                    font-size: 1.8vw;
                }
            }

            .right-box {
                gap: 5vw;

                .link-group {
                    .link-group-title {
                        font-size: 1.8vw;
                        margin-bottom: 3.5vw;
                    }

                    .link-list {
                        gap: 2vw;
                    }
                }
            }
        }

        .copyright {
            font-size: 1.8vw;
            margin-top: 3vw;
            padding-top: 2vw;
            text-align: center;
        }
    }
}

@media (max-aspect-ratio: 3/4) {
    .footer {
        .content {
            .left-box {
                gap: 3vw;

                .logo {
                    --w: 20vw;
                    --h: 8vw;
                }

                .text {
                    font-size: 2.3vw;
                }
            }

            .right-box {
                display: none;
            }
        }

        .copyright {
            font-size: 2vw;
            margin-top: 3vw;
            padding-top: 2vw;
        }
    }
}

@media (max-aspect-ratio: 9/16) {
    .footer {
        .content {
            .left-box {
                gap: 1vw;

                .logo {
                    --w: 26vw;
                    --h: 8vw;
                }

                .text {
                    font-size: 2.8vw;
                }
            }
        }

        .copyright {
            font-size: 2.5vw;
            margin-top: 4vw;
            padding-top: 3vw;
        }
    }
}
</style>